<template>
  <div class="container" :style="'height: ' + docheight + 'px'">
    <leftcont></leftcont>
    <div class="righCont">
      <topcont></topcont>
      <div class="content">
        <div class="setCont">
          <div class="mainTop">
            <div class="mainTitle">编辑套餐</div>
            <btn value="返回列表" @click="backfn"></btn>
          </div>
          <div class="formCont">
            <el-form
              :model="userInfo"
              ref="userInfo"
              :rules="rules"
              label-width="120px"
            >
              <el-form-item label="套餐封面" v-if="userInfo.package_cover">
                <cropperCom
                  @successCropper="getHeadImg"
                  :propImg="userInfo.package_cover"
                ></cropperCom>
              </el-form-item>
              <el-form-item label="套餐昵称" prop="package_name">
                <el-input v-model="userInfo.package_name"></el-input>
              </el-form-item>
              <el-form-item label="套餐价格" prop="package_price">
                <el-input v-model="userInfo.package_price"></el-input>
              </el-form-item>
              <el-form-item label="套餐原价" prop="package_original_price">
                <el-input v-model="userInfo.package_original_price"></el-input>
              </el-form-item>
              <el-form-item label="套餐时长" prop="package_time">
                <el-input
                  :maxlength="11"
                  v-model="userInfo.package_time"
                ></el-input>
              </el-form-item>
              <el-form-item label="初始销量">
                <el-input
                  type="number"
                  :maxlength="6"
                  placeholder="请输入此套餐初始销量"
                  v-model="userInfo.xn_sales"
                ></el-input>
              </el-form-item>
              <el-form-item label="套餐状态">
                <el-radio v-model="userInfo.package_status" :label="1"
                  >正常</el-radio
                >
                <el-radio v-model="userInfo.package_status" :label="2"
                  >禁用</el-radio
                >
              </el-form-item>
              <el-form-item label="套餐介绍" prop="package_introduce">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  v-model="userInfo.package_introduce"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="套餐功效" prop="package_effect">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  v-model="userInfo.package_effect"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="服务内容">
                <btn value="+编辑服务内容" @click="addContFn"></btn>
              </el-form-item>
              <el-form-item label=" ">
                <div
                  class="contentItem"
                  :key="index"
                  v-for="(item, index) in userInfo.package_service_content"
                >
                  <el-input
                    v-model="item.name"
                    placeholder="请输入服务内容"
                  ></el-input>
                  <el-button
                    class="delBtn"
                    type="danger"
                    @click="delFn(index)"
                    plain
                    >删除</el-button
                  >
                </div>
              </el-form-item>
              <el-form-item
                v-if="userInfo.package_details_img"
                class="formImg"
                label="详情图片"
              >
                <defUpImg
                  width="150px"
                  :propImg="userInfo.package_details_img"
                  @upImgSuccess="getpackage_details_img"
                ></defUpImg>
              </el-form-item>
              <el-form-item label="">
                <btn value="保存" @click="saveFn"></btn>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import leftcont from "@/components/leftCont.vue";
import topcont from "@/components/topCont.vue";
import btn from "@/components/public/btn.vue";
import defUpImg from "@/components/public/defUpImg.vue";
import { packSave, editShowPack } from "@/http/api";
import cropperCom from "@/components/public/cropperCom.vue";

export default {
  components: { cropperCom, leftcont, topcont, btn, defUpImg },
  data() {
    var checkName = (rule, value, callback) => {
      if (value == "") {
        return callback(new Error("请输入套餐名称"));
      } else {
        return callback();
      }
    };
    var checkpackage_introduce = (rule, value, callback) => {
      if (value == "") {
        return callback(new Error("请输入套餐描述"));
      } else {
        return callback();
      }
    };
    var checkpackage_effect = (rule, value, callback) => {
      if (value == "") {
        return callback(new Error("请输入套餐功效"));
      } else {
        return callback();
      }
    };
    var check_package_price = (rule, value, callback) => {
      if (value == "" || value == 0) {
        return callback(new Error("请输入套餐价格"));
      } else {
        return callback();
      }
    };
    var check_package_original_price = (rule, value, callback) => {
      if (value == "" || value == 0) {
        return callback(new Error("请输入套餐原价"));
      } else {
        return callback();
      }
    };

    var check_package_time = (rule, value, callback) => {
      if (value == "" || value == 0) {
        return callback(new Error("请输入套餐时长"));
      } else {
        return callback();
      }
    };
    return {
      userInfo: {
        package_name: "",
        package_introduce: "",
        package_effect: "",
        package_price: "",
        package_original_price: "",
        package_time: "",
        xn_sales: "",
        package_status: 1,
        package_cover: "",
        package_details_img: "",
        package_service_content: [{ name: "" }]
      },
      rules: {
        package_name: [
          { validator: checkName, required: true, trigger: "blur" }
        ],

        package_introduce: [
          { validator: checkpackage_introduce, required: true, trigger: "blur" }
        ],

        package_effect: [
          { validator: checkpackage_effect, required: true, trigger: "blur" }
        ],
        package_price: [
          { validator: check_package_price, required: true, trigger: "blur" }
        ],
        package_original_price: [
          {
            validator: check_package_original_price,
            required: true,
            trigger: "blur"
          }
        ],

        package_time: [
          { validator: check_package_time, required: true, trigger: "blur" }
        ]
      }
    };
  },
  props: {},
  methods: {
    backfn() {
      this.$router.back();
    },
    addContFn() {
      this.userInfo.package_service_content.push({ name: "" });
    },
    delFn(i) {
      this.userInfo.package_service_content.splice(i, 1);
    },
    getHeadImg(src) {
      this.userInfo.package_cover = src;
    },
    getpackage_details_img(src) {
      this.userInfo.package_details_img = src;
    },
    saveFn() {
      this.$refs["userInfo"].validate(valid => {
        if (valid) {
          if (!this.userInfo.package_cover) {
            this.$message("请上传套餐封面");
            return false;
          } else {
            this.Submit();
          }
        } else {
          return false;
        }
      });
    },
    Submit() {
      let data = this.userInfo;
      let loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(255, 255, 255, 0.7)"
      });
      packSave(data)
        .then(res => {
          if (res.data.code == 1) {
            this.$message({
              message: "编辑成功",
              type: "success"
            });
            setTimeout(() => {
              this.$router.back();
            }, 1500);
          } else {
            this.$message(res.data.msg);
          }
          loading.close();
        })
        .catch(() => {
          loading.close();
          this.$message("网络请求超时");
        });
    },
    getData() {
      let data = {
        package_id: this.$route.query.id
      };
      editShowPack(data)
        .then(res => {
          if (res.data.code == 1) {
            let resData = res.data.data;
            this.userInfo = {
              package_id: this.$route.query.id,
              package_name: resData.package_name,
              package_introduce: resData.package_introduce,
              package_effect: resData.package_effect,
              package_price: resData.package_price,
              package_original_price: resData.package_original_price,
              package_time: resData.package_time,
              xn_sales: resData.xn_sales,
              package_status: resData.package_status,
              package_cover: resData.package_cover,
              package_details_img: resData.package_details_img,
              package_service_content: resData.package_service_content
            };
          } else {
            this.$message(res.data.msg);
          }
        })
        .catch(err => {
          this.$message("网络请求超时");
        });
    }
  },
  mounted() {},
  created() {
    this.getData();
  }
};
</script>

<style scoped lang="less">
.container {
  width: 100%;
  display: flex;
  overflow: hidden;
  .righCont {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-left: 15px;
    height: 100%;
    width: 10px;
    background-color: #f4f8ff;
    .content {
      padding: 20px;
      box-sizing: border-box;
      width: 100%;
      flex: 1;
      overflow: auto;
      .setCont {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        background-color: #fff;
        .mainTop {
          display: flex;
          margin-bottom: 25px;
          align-items: center;
          justify-content: space-between;
          .mainTitle {
            font-size: 14px;
            font-weight: bold;
          }
        }
        .formCont {
          width: 600px;
          .contentItem {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            .delBtn {
              margin-left: 15px;
              width: 100px;
            }
          }
        }
      }
    }
  }
}
</style>
<style>
.el-collapse-item__wrap {
  border-bottom: none;
}
.el-collapse {
  border-top: none;
  border-bottom: none;
}
.content {
  overflow: -moz-scrollbars-none;
}
.content::-webkit-scrollbar {
  width: 0 !important;
}
.content {
  -ms-overflow-style: none;
}
</style>
<style>
.formImg .el-form-item__content {
  line-height: normal !important;
}
</style>
